<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="<%=path %>/static/css/css.css?1" />
<link rel="stylesheet" type="text/css" href="<%=path %>/static/jquery-ui/jquery-ui.min.css" />
<script type="text/javascript" src="<%=path %>/static/js/json2.js"></script>
<script type="text/javascript" src="<%=path %>/static/js/jquery.js"></script>
<script type="text/javascript" src="<%=path %>/static/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="<%=path %>/static/layer/layer.js"></script>
<script type="text/javascript" src="<%=path %>/static/js/gridview.js?v=1"></script>
<script type="text/javascript" src="<%=path %>/static/js/formview.js?v=1"></script>
<script type="text/javascript" src="<%=path %>/static/js/tool.js"></script>
<script type="text/javascript" src="<%=path %>/static/js/validate.js"></script>
<script type="text/javascript" src="<%=path %>/static/js/echarts.js"></script>
<script type="text/javascript" src="<%=path %>/static/js/loadingDiv.js"></script>
</head>

<body>
<ul class=tab_nav>
  <li>
    <a class="current" href="javascript:void(0)">数据报表</a>
  </li>
</ul>
<div class="contrainer">
   <table class="mtable" style="margin-top:15px;">
      <tr>
         <th>今日分享总量</th>
         <th>今日点击总量</th>
         <th>今日点击率</th>
         <th>今日消耗总额</th>
      </tr>
      <tr style="text-align:center">
         <td id="shareCnt"></td>
         <td id="readCnt"></td>
         <td id="clickRate"></td>
         <td id="conMoney"></td>
      </tr>
   </table>

<div id="formview" class="rbox1"></div>
<div style="padding:0 10px;overflow:hidden">
<div style="background:#fff;overflow:hidden">
<div id="ec_line" style="width:100%;height:300px;margin-top:15px;">
</div>
</div>
</div>
<div class="rcon2" >
      <table class="search_tb">
         <tr>
            <td style="padding-left:15px;">
               <input type="text" onclick="WdatePicker()" name="createDateTime" placeholder="开始时间" />-<input type="text" onclick="WdatePicker()" name="createDateTime" placeholder="结束时间" />
            </td>
            <td>
               <input type="text" name="id" placeholder="客户名称或ID" />
               <input type="button" class="searchbtn" value="" id="queryBtn">
               <input type="button" class="btnblue" value="导出" id="exportBtn" style="margin-left:15px;">
            </td>
         </tr>
      </table>
</div>
<div id="list" class="rcon2">
   <table class="mtable">
      <tr>
         <th style="width:130px;">时间</th>
         <th>点击量</th>
         <th>分享量</th>
         <th>点击率</th>
         <th>花费（元）</th>
      </tr>
   </table>
</div>
</div>
<script type="text/javascript" src="<%=path %>/static/js/underscore.js"></script>
<script type='text/javascript' src='<%=path %>/static/My97DatePicker/WdatePicker.js'></script>
<script type='text/javascript' src='<%=path %>/dwr/engine.js'></script>
<script type='text/javascript' src='<%=path %>/dwr/util.js'></script>
<script type='text/javascript' src='<%=path %>/dwr/interface/BaseDwr.js'></script>
<script>
   $(function(){
      $.getJSON("<%=path %>/public/common/getDataSta.htmls",{},function(data){
         var clickRate;
         if(data.shareCnt==0){
            clickRate="0%";
         }
         else{
            clickRate=data.readCnt/data.shareCnt;
            clickRate=clickRate*100;
            clickRate=clickRate.toFixed(2)+"%";
         }
         $("#shareCnt").text(data.shareCnt);
         $("#readCnt").text(data.readCnt);
         $("#clickRate").text(clickRate);
         $("#conMoney").text(data.conMoney);
      });

      $("#selType").val("今日");
      loadChart();
      $("#queryBtn").click(function(){
         loadChart();
      });
      $("#exportBtn").click(function(){
         $("<iframe name='ef' style=\"display: none\"></iframe>").appendTo($("body"));
         $("<form target='ef' action='${pageContext.request.contextPath}/public/stat/excelDataReport.htmls'></form>").appendTo($('body')).submit();
      });
   });

   function loadChart(){
      myLoading.showLoading(true);

      $.getJSON("<%=path %>/public/common/getDataReport.htmls",{},function(data){
         myLoading.showLoading(false);
         var xData=[],series=[];
         var cntData1=[],cntData2=[];
         $.each(data,function(i,item){
            xData.push(item.datetime);
            cntData1.push(item.readCnt);
            cntData2.push(item.shareCnt);

         });
         series.push({name:'点击量',type:'line',stack: '总量',data:cntData1});
         series.push({name:'分享量',type:'line',stack: '总量',data:cntData2});
         var myChartLine = echarts.init(document.getElementById('ec_line'));
         lineoption = {
            title: {
               text: '投放趋势图'
            },
            tooltip: {
               trigger: 'axis'
            },
            legend: {
               data:['点击量','分享量']
            },
            grid: {
               left: '3%',
               right: '4%',
               bottom: '3%',
               containLabel: true
            },
            toolbox: {
               feature: {
                  saveAsImage: {}
               }
            },
            xAxis: {
               type: 'category',
               boundaryGap: false,
               data: xData
            },
            yAxis: {
               type: 'value'
            },
            series: series
         };
         myChartLine.setOption(lineoption);
      });

   }
   function loadChart1(){
         myLoading.showLoading(true);
         var startDate,endDate,date;
                  var createDateTime1 = $(".search_tb").find(":input[name=createDateTime]:eq(0)").val();
                  var createDateTime2 = $(".search_tb").find(":input[name=createDateTime]:eq(1)").val();
                  if($("#selType").val()=="最近7日"){
                     var curDate = new Date(); //获取今天日期
                     createDateTime2=curDate.Format("yyyy-MM-dd");
                     var lastDate=curDate.setDate(curDate.getDate() - 7);
                     lastDate=new Date(lastDate);
                     createDateTime1=lastDate.Format("yyyy-MM-dd");

                  }
                  else if($("#selType").val()=="最近30日"){
                     var curDate = new Date(); //获取今天日期
                     createDateTime2=curDate.Format("yyyy-MM-dd");
                     var lastDate=curDate.setDate(curDate.getDate() - 30);
                     lastDate=new Date(lastDate);
                     createDateTime1=lastDate.Format("yyyy-MM-dd");
                  }
                  else if($("#selType").val()=="今日"){
                     var curDate = new Date();
                     date=curDate.Format("yyyy-MM-dd");
                  }
                  else if($("#selType").val()=="昨日"){
                     var curDate = new Date();
                     var lastDate=curDate.setDate(curDate.getDate() - 1);
                     lastDate=new Date(lastDate);
                     date=lastDate.Format("yyyy-MM-dd");
                  }

                  if(createDateTime1!=""&&createDateTime2!=""){
                     if(createDateTime1==createDateTime2){
                         date=createDateTime1;
                     }
                     else{
                         startDate=createDateTime1;
                         endDate=createDateTime2;
                     }
                  }

                  $.getJSON("<%=path %>/public/common/getDataReport.htmls",{id:$("input[name=id]").val(),startDate:startDate,endDate:endDate,date:date},function(data){
                   myLoading.showLoading(false);
                     $("#list .mtable").html("<tr><th style='width:130px;'>时间</th><th>点击量</th><th>分享量</th><th>点击率</th><th>花费（元）</th></tr>")
                                    var xData=[],series=[];
                                    var cntData1=[],cntData2=[];
                                    $.each(data,function(i,item){
                                       xData.push(item.datetime);
                                       cntData1.push(item.readCnt);
                                       cntData2.push(item.shareCnt);

                                       var per;
                                       if(item.shareCnt==0){
                                          per="0%";
                                       }
                                       else{
                                          per=item.readCnt/item.shareCnt;
                                          per=per*100;
                                          per=per.toFixed(2)+"%";
                                       }
                                       var html="<tr>";
                                       html+="<td style='text-align:center'>"+item.datetime+"</td>";
                                       html+="<td style='text-align:center'>"+item.readCnt+"</td>";
                                       html+="<td style='text-align:center'>"+item.shareCnt+"</td>";
                                       html+="<td style='text-align:center'>"+per+"</td>";
                                       html+="<td style='text-align:center'>"+(item.spend==null?'0.0':item.spend.toFixed(1))+"</td>";
                                       html+="</tr>";

                                       $("#list .mtable").append(html);
                                    });
                                    series.push({name:'点击量',type:'line',stack: '总量',data:cntData1});
                                    series.push({name:'分享量',type:'line',stack: '总量',data:cntData2});
                                    var myChartLine = echarts.init(document.getElementById('ec_line'));
                                    lineoption = {
                                       title: {
                                          text: '投放趋势图'
                                       },
                                       tooltip: {
                                          trigger: 'axis'
                                       },
                                       legend: {
                                          data:['点击量','分享量']
                                       },
                                       grid: {
                                          left: '3%',
                                          right: '4%',
                                          bottom: '3%',
                                          containLabel: true
                                       },
                                       toolbox: {
                                          feature: {
                                             saveAsImage: {}
                                          }
                                       },
                                       xAxis: {
                                          type: 'category',
                                          boundaryGap: false,
                                          data: xData
                                       },
                                       yAxis: {
                                          type: 'value'
                                       },
                                       series: series
                                    };
                                    myChartLine.setOption(lineoption);
                                 });

      }
</script>
</body>
</html>